<!-- DOWNLOADED FROM WWW.SCRIPTGATES.COM -->
<!DOCTYPE html>
<html>
<head>
<?php $this->load->view('js-css-view') ?>

    <script type="text/javascript">
jQuery(document).ready(function () {
    
        var colors = Highcharts.getOptions().colors,
            categories = [
                <?php foreach($song_populer as $key => $val) { echo "'".$val['title']." - ".$val['artist']."'"; if(isset($song_populer[$key+1])) { echo ','; }  } ?>
            ],
            name = 'Most Populer Song',
            data = [                
                <?php $no = 1; foreach($song_populer as $key => $val)  { echo '{ y: '.$val['jml'].", color: colors[$no]".' }'; if(isset($song_populer[$key+1])) { echo ','; } $no++; } ?>
                   ];
    
        function setChart(name, categories, data, color) {
			chart.xAxis[0].setCategories(categories, false);
			chart.series[0].remove(false);
			chart.addSeries({
				name: name,
				data: data,
				color: color || 'white'
			}, false);
			chart.redraw();
        }
    
        var chart = jQuery('#chart').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Most Populer Song'
            },
            subtitle: {
                text: 'Click the columns to view who user have been play.'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total Play'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y +' times';
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +'times played</b><br/>';
                    
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: true
            }
        })
        .highcharts(); // return chart
    });
    

		</script>

 <script type="text/javascript">
jQuery(document).ready(function () {
    
        var colors = Highcharts.getOptions().colors,
            categories = [
                <?php foreach($song_favorite as $key => $val) { echo "'".$val['title']." - ".$val['artist']."'"; if(isset($song_favorite[$key+1])) { echo ','; }  } ?>
            ],
            name = 'Most Favorite Song',
            data = [                
                <?php $no = 1; foreach($song_favorite as $key => $val)  { echo '{ y: '.$val['jml'].", color: colors[$no]".' }'; if(isset($song_favorite[$key+1])) { echo ','; } $no++; } ?>
                   ];
    
        function setChart(name, categories, data, color) {
			chart.xAxis[0].setCategories(categories, false);
			chart.series[0].remove(false);
			chart.addSeries({
				name: name,
				data: data,
				color: color || 'white'
			}, false);
			chart.redraw();
        }
    
        var chart = jQuery('#chartSongFav').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Most Favorite Song'
            },
            subtitle: {
                text: 'Click the columns to view who user have been play.'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total Rate'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y +' star';
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +' star point</b><br/>';
                    
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: true
            }
        })
        .highcharts(); // return chart
    });
    

		</script>               
                
                
                
                <script type="text/javascript">
jQuery(document).ready(function () {
    
        var colors = Highcharts.getOptions().colors,
            categories = [<?php foreach($artist_populer as $key => $val) { echo "'".$val['artist']."'"; if(isset($artist_populer[$key+1])) { echo ','; }  } ?>],
            name = 'Most Populer Artist',
            data = [<?php $no = 1; foreach($artist_populer as $key => $val)  { echo '{ y: '.$val['jml'].", color: colors[$no]".' }'; if(isset($artist_populer[$key+1])) { echo ','; } $no++; } ?>
            
                    ];
    
        function setChart(name, categories, data, color) {
			chart.xAxis[0].setCategories(categories, false);
			chart.series[0].remove(false);
			chart.addSeries({
				name: name,
				data: data,
				color: color || 'white'
			}, false);
			chart.redraw();
        }
    
        var chart = jQuery('#chart2').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Most Populer Artist'
            },
            subtitle: {
                text: 'Click the columns to view who user have been play.'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total Play'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y +' times';
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +' times her/his songs played</b><br/>';
                   
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: true
            }
        })
        .highcharts(); // return chart
    });
    

		</script>
    
       <script type="text/javascript">
jQuery(document).ready(function () {
    
        var colors = Highcharts.getOptions().colors,
            categories = [<?php foreach($artist_favorite as $key => $val) { echo "'".$val['artist']."'"; if(isset($artist_favorite[$key+1])) { echo ','; }  } ?>],
            name = 'Most Favorite Artist',
            data = [<?php $no = 1; foreach($artist_favorite as $key => $val)  { echo '{ y: '.$val['jml'].", color: colors[$no]".' }'; if(isset($artist_favorite[$key+1])) { echo ','; } $no++; } ?>
            
                    ];
    
        function setChart(name, categories, data, color) {
			chart.xAxis[0].setCategories(categories, false);
			chart.series[0].remove(false);
			chart.addSeries({
				name: name,
				data: data,
				color: color || 'white'
			}, false);
			chart.redraw();
        }
    
        var chart = jQuery('#chartArtistFav').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Most Favorite Artist'
            },
            subtitle: {
                text: 'Click the columns to view who user have been play.'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total Star Point'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y +' Star';
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +' star point</b><br/>';
                   
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: true
            }
        })
        .highcharts(); // return chart
    });
    

		</script>           
                
                
                <script type="text/javascript">
jQuery(document).ready(function () {
        jQuery('#chart3').highcharts({
            title: {
                text: 'Most User LogIn At <?php echo date("Y"); ?>',
                x: -20 //center
            },
            subtitle: {
                text: '-',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Times Login'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ' times login'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [
            <?php foreach($user_login as $row) { ?>    
                {
                name: '<?php echo $row['username'] ?>',
                data: [ <?php foreach($row['login'] as $login) { echo $login.','; } ?> ]
            },
                    
            <?php } ?>        
            
            ]
        });
    });
    

		</script>
                
                  <script type="text/javascript">
jQuery(document).ready(function () {
        jQuery('#chartKaraoke').highcharts({
            title: {
                text: 'Most User Karaoke At <?php echo date("Y"); ?>',
                x: -20 //center
            },
            subtitle: {
                text: '-',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Times Karaoke'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ' times karaoke'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [
            <?php foreach($user_karaoke as $row) { ?>    
                {
                name: '<?php echo $row['username'] ?>',
                data: [ <?php foreach($row['karaoke'] as $karaoke) { echo $karaoke.','; } ?> ]
            },
                    
            <?php } ?>        
            
            ]
        });
    });
    

		</script>
                
        <script type="text/javascript">
jQuery(document).ready(function () {
        jQuery('#chartRecording').highcharts({
            title: {
                text: 'Most User Recording At <?php echo date("Y"); ?>',
                x: -20 //center
            },
            subtitle: {
                text: '-',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Times Recording'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ' times recording'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [
            <?php foreach($user_record as $row) { ?>    
                {
                name: '<?php echo $row['username'] ?>',
                data: [ <?php foreach($row['record'] as $record) { echo $record.','; } ?> ]
            },
                    
            <?php } ?>        
            
            ]
        });
    });
    

		</script>           
                
                
                
    <script src="<?php echo base_url() ?>assets/chart/js/highcharts.js"></script>
<script src="<?php echo base_url() ?>assets/chart/js/modules/exporting.js"></script>
</head>

<body>
     
<div class="mainwrapper">    
    <div class="header">
        <?php $this->load->view('header-view'); ?>
    </div>    
    <div class="leftpanel">
         <?php $this->load->view('menu-view'); ?>
    </div><!-- leftpanel -->
    
    <div class="rightpanel">        
        <ul class="breadcrumbs">
            <li><a href="<?php echo base_url() ?><?php echo $link; ?>"><i class="iconfa-home"></i></a> <span class="separator"></span></li>
            <li><?php echo $current; ?></li>            
        </ul>
        
        <div class="pageheader">
          
            <div class="pageicon"><span class="iconfa-home"></span></div>
            <div class="pagetitle">                
                <h1><?php echo $current; ?></h1>
            </div>
        </div><!--pageheader-->
        
        <div class="maincontent">
            <div class="maincontentinner">
               <div class="row-fluid">
                    <div id="dashboard-left" class="span12">
                        
                       <h4 class="widgettitle title-primary">Song Statistic</h4>
                        <div class="tabbedwidget tab-primary">
                            <ul role="tablist" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                                <li aria-selected="false" aria-labelledby="ui-id-4" aria-controls="a-1" tabindex="-1" role="tab" class="ui-state-default ui-corner-top"><a id="ui-id-4" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#a-1"><i class="icon-heart"></i> Most Populer</a></li>
                                <li aria-selected="false" aria-labelledby="ui-id-5" aria-controls="a-2" tabindex="-1" role="tab" class="ui-state-default ui-corner-top"><a id="ui-id-5" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#a-2"><i class="icon-star"></i> Most Favorite</a></li>
                            </ul>
                            <div style="display: none;" aria-hidden="true" aria-expanded="false" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-4" id="a-1">
                        
                             <div id="chart" style="min-width: 310px; height: 400px; margin: 0 10"></div>
                        
                            </div>
                            <div aria-hidden="true" aria-expanded="false" style="display: none;" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-5" id="a-2">
                                <div id="chartSongFav" style="min-width: 310px; height: 400px; margin: 0 10"></div>
                            </div>
                           
                        </div>
                       <br/>
                       <h4 class="widgettitle title-primary">Artist Statistic</h4>
                        <div class="tabbedwidget tab-primary">
                            <ul role="tablist" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                                <li aria-selected="false" aria-labelledby="ui-id-4" aria-controls="a-1" tabindex="-1" role="tab" class="ui-state-default ui-corner-top"><a id="ui-id-4" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#a-1"><i class="icon-heart"></i> Most Populer</a></li>
                                <li aria-selected="false" aria-labelledby="ui-id-5" aria-controls="a-2" tabindex="-1" role="tab" class="ui-state-default ui-corner-top"><a id="ui-id-5" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#a-2"><i class="icon-star"></i> Most Favorite</a></li>
                            </ul>
                            <div style="display: none;" aria-hidden="true" aria-expanded="false" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-4" id="a-1">
                        
                             <div id="chart2" style="min-width: 310px; height: 400px; margin: 0 10"></div>
                        
                            </div>
                            <div aria-hidden="true" aria-expanded="false" style="display: none;" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-5" id="a-2">
                                <div id="chartArtistFav" style="min-width: 310px; height: 400px; margin: 0 10"></div>
                            </div>
                           
                        </div>
                       
                       <br/>
                       <h4 class="widgettitle title-primary">User Statistic</h4>
                        <div class="tabbedwidget tab-primary">
                            <ul role="tablist" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                                <li aria-selected="false" aria-labelledby="ui-id-4" aria-controls="a-1" tabindex="-1" role="tab" class="ui-state-default ui-corner-top"><a id="ui-id-4" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#a-1"><i class="icon-heart"></i> Most User Login</a></li>
                                <li aria-selected="false" aria-labelledby="ui-id-5" aria-controls="a-2" tabindex="-1" role="tab" class="ui-state-default ui-corner-top"><a id="ui-id-5" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#a-2"><i class="icon-star"></i> Most User Karaoke</a></li>
                                <li aria-selected="false" aria-labelledby="ui-id-6" aria-controls="a-3" tabindex="-1" role="tab" class="ui-state-default ui-corner-top"><a id="ui-id-6" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#a-3"><i class="icon-star"></i> Most User Recording</a></li>
                            </ul>
                            <div style="display: none;" aria-hidden="true" aria-expanded="false" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-4" id="a-1">
                        
                           <div id="chart3" style="min-width: 310px; height: 400px; margin: 0 10"></div>
                        
                            </div>
                            <div aria-hidden="true" aria-expanded="false" style="display: none;" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-5" id="a-2">
                                 <div id="chartKaraoke" style="min-width: 310px; height: 400px; margin: 0 10"></div>
                            </div>
                            <div aria-hidden="true" aria-expanded="false" style="display: none;" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-6" id="a-3">
                                 <div id="chartRecording" style="min-width: 310px; height: 400px; margin: 0 10"></div>
                            </div>
                           
                        </div>
                           
                        </div>
                        
                    </div><!--span8-->
              
                </div><!--row-fluid-->
                
                <div class="footer">
                    <?php $this->load->view('footer-view'); ?>
                    <script type="text/javascript">
    jQuery(document).ready(function() {
        // tabbed widget
        jQuery('.tabbedwidget').tabs();
     
    });
</script>
                </div><!--footer-->
                
            </div><!--maincontentinner-->
        </div><!--maincontent-->
        
    </div><!--rightpanel-->
    
</div><!--mainwrapper-->


</body>
</html>